<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>产品列表</title>
		<link rel="stylesheet" type="text/css" href="css/public.css">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<style type="text/css">
			.product_item {
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="cont" v-cloak>
			<ul>
				<li class="product_item" v-for="item in products">
					<div>名  称：{{item.name}}</div>
					<div>价  格：{{item.price}}</div>
					<div><a :href="'product_code.html?product_id={0}&product_name={1}'.format(item.id, item.name)">二维码</a></div>
				</li>
			</ul>
		</div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/app-common.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: ".cont",
				data: {
					products: []
				},
				mounted: function() {
					var loadingBox = toast('正在加载...');
					$.ajax({
						type: "get",
						url: APP_CONFIG.listProductUrl,
						success: function(res){
							if (checkServiceResult(res)) {
								vm.products = res.data;
							}
						},
						complete: function(xhr, status) {
							loadingBox.close();
						}
					})
				}
			});
		</script>
	</body>
</html>